import React, { Component, createRef, forwardRef, useRef, useImperativeHandle } from 'react';

import Child from './Child'

const Input = forwardRef((props, ref) => {
  const inputRef = useRef()
  useImperativeHandle(ref, () => inputRef.current)
  return (
    <input type="text" ref={inputRef}/>
  )
})

class App extends Component {
  constructor(props) {
    super(props)
    this.testRef = createRef()
  }

  componentDidMount() {
    // this.testRef.current.focus()
  }

  render() {
    return (
      <div>
        <Child
          title="abc"
        ></Child>
        <Input ref={this.testRef}></Input>
      </div>
    );
  }
}

export default App;